<template>
  <div class="bing-Alipay-dialog" @click.prevent.stop>
    <div class="dialog-container">
      <div class="header">
        <div class="header-title">绑定支付宝</div>
        <image class="close-icon" src="~@/static/images/mine/close-icon.png" @click="cancelBtn" />
      </div>
      <div class="form-container">
        <div class="form-item">
          <div class="form-label">姓名</div>
          <div class="form-input">
            <input type="text" placeholder="请输入支付宝实名认证的姓名" v-model="formData.zfb_name">
          </div>
        </div>
        <div class="form-item">
          <div class="form-label">支付宝账户</div>
          <div class="form-input">
            <input type="text" placeholder="请输入支付宝账号（手机号）" v-model="formData.zfb_account">
          </div>
        </div>
      </div>
      <div class="handlers">
        <div class="handler" @click="bindHandler">确定</div>
        <div class="handler" @click="cancelBtn">取消</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { showToast } from '@/utils/tools';
import { reactive } from 'vue'
import { bindAlipay } from "@/api/api-user"
import { useUser } from '@/stores/user-store';

const emits = defineEmits(['close'])
const userStore = useUser();
const { updateZfbInfo } = userStore;

// 表单内容
const formData = reactive<BindForm>({
  zfb_name: '',
  zfb_account: ''
})

/**
 * 关闭弹窗事件
 */
const cancelBtn = () => {
  formData.zfb_account = '';
  formData.zfb_name = '';
  emits('close');
}
/**
 * 绑定支付宝操作：检查表单完整性 -> 发送请求 -> 成功 -> 关闭弹窗并进行文字提示 -> 清空表单内容
 */
const formLabelMap: any = reactive({
  'zfb_name': {
    txt: '姓名',
    value: 'zfb_name'
  },
  'zfb_account': {
    txt: '支付宝账户',
    value: 'zfb_account'
  }
})
const bindHandler = async () => {
  let flag = true;
  Object.keys(formData).forEach((key: string) => {
    if (!formData[key]) {
      showToast(`${formLabelMap[key].txt}不能为空~`);
      flag = false;
    }
  })
  if (!flag) return;
  // 调用绑定接口
  const res: any = await bindAlipay(formData.zfb_account, formData.zfb_name);
  const target = res.data.data;
  if (target && target.code && String(target.code) === '200') {
    // 绑定成功，提示绑定成功，并修改store中用户的支付宝账户信息，并关闭弹窗
    // 1.修改store中的数据
    updateZfbInfo(formData.zfb_account, formData.zfb_name);
    // 2.提示绑定成功
    showToast('绑定成功~')
    // 3.关闭弹窗
    cancelBtn();
  } else {
    showToast('绑定失败，请稍后重试')
  }
}

</script>

<style lang="scss" scoped>
.bing-Alipay-dialog {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, .62);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;

  .dialog-container {
    width: 567rpx;
    padding: 23rpx 0;
    box-sizing: border-box;
    border-radius: 23rpx;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    .header {
      width: 100%;
      margin-bottom: 38rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      .header-title {
        color: #333333;
        font-size: 35rpx;
      }
      .close-icon {
        width: 31rpx;
        height: 31rpx;
        position: absolute;
        top: 10rpx;
        right: 23rpx;
      }
    }
    .form-container {
      width: 100%;
      margin-bottom: 92rpx;
      .form-item {
        height: 104rpx;
        padding: 0 31rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        border-bottom: 2rpx solid rgba(204, 204, 204, .4);

        .form-label {
          margin-right: 23rpx;
          flex-shrink: 0;
          font-size: 29rpx;
        }
        .form-input {
          flex: 1;
          font-size: 25rpx;
        }
      }
    }

    .handlers {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .handler {
        width: 475rpx;
        height: 85rpx;
        margin-bottom: 19rpx;
        border-radius: 50rpx;
        text-align: center;
        line-height: 85rpx;
        font-size: 31rpx;
        letter-spacing: 2rpx;

        &:first-of-type {
          color: #fff;
          background-image: linear-gradient(270deg, #f2aa7b 0%, #f5c070);
        }
        &:last-of-type {
          color: rgba(0, 0, 0, .4);
          font-size: 27rpx;
        }
      }
    }
  }
}
</style>